<template>
  <div class="mainBg">
    <div class="cann" id="waterSystemDisplay"/>
    <Spin size="large" fix v-if="switches.loadImgStatus"></Spin>
  </div>
</template>

<script>
  import {FlowingSupport} from '../../../static/qunee/flowPrototype'
  export default {
    name: 'WaterSystemDisplay',
    mounted: function () {
      this.initGraph()
      setTimeout(() => {
        this.loadData()
      }, 100)
    },
    data() {
      return {
        graph: null,
        flowObj: null,
        switches: {
          loadImgStatus: false // 加载状态
        },
        imgSystem: {},
        events: {
          onmousewheel: (evt, graph) => {
            console.log('onmousewheel')
          },
          ondrag: (evt, graph) => {
            console.log('ondrag')
          },
          onclick: (evt) => {
          },
          ondblclick: (evt, graph) => {
          },
          onmousemove: (evt, graph) => {
            let ui = graph.getUIByMouseEvent(evt)
            if (ui && ui.data instanceof Q.Node) {
              graph.cursor = 'pointer'
              return
            }
            graph.cursor = null
          }
        }
      }
    },
    methods: {
      initGraph: function () {
        // 初始化 拓扑图2
        if (this.graph === null) {
          this.graph = new Q.Graph('waterSystemDisplay')
          // 禁止双击 放大
          this.graph.enableDoubleClickToOverview = false
          // 设置提示贴
          this.graph.enableTooltip = false
          this.graph.tooltipDelay = 0
          this.graph.tooltipDuration = 100000
          // 只读
          this.graph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
          // 添加 一些事件
          this.graph.addCustomInteraction(this.events)
          // 添加一些样式
          this.graph.styles = {}
          this.graph.styles[Q.Styles.SELECTION_COLOR] = '#05ff63'
          // this.graph.styles[Q.Styles.SELECTION_SHADOW_BLUR] = Q.Consts.SELECTION_TYPE_SHADOW
          // 添加动画
          this.flowObj = new FlowingSupport(this.graph)
        }
      },
      loadData: function () {
        this.switches.loadImgStatus = true
        // 加载 系统图的 数据
        window.myapi.do_get('/sysimg/info/12').then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.imgSystem = resp.data.data
            // 把json 数据转为 视图的方法
            this.graph.parseJSON(this.imgSystem.layoutData)
            // 自适应 范围
            this.graph.zoomToOverview()
            // 添加状态小点
            // 添加流动线
            this.graph.forEach(item => {
              if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
                // console.log('item.get', item.get('color'))
                // 添加流动的效果
                this.flowObj.addFlowing(item, 3, true, item.get('color'))
              }
            })
            // 执行动态
            this.flowObj.start()

            // 添加实时数据显示
            // this.executeTimerLoadRealData()

            // todo 模拟每隔一段时间，关闭机器
            // this.timers.push(setInterval(() => { this.randomShutDownDevice() }, 1000))
          } else {
            this.$Notice.error({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).catch(reason => {
          this.$Notice.warning({
            title: '提示',
            desc: '加载数据有误，请检查.......'
          })
        }).finally(() => {
          this.switches.loadImgStatus = false
          this.flowObj.start()
        })
      },
    },
  }
</script>

<style scoped>
  .mainBg {
    width: 100%;
    height: 1000px;
    padding: 5px;
  }

  .cann {
    height: 100%;
    width: 100%;
    border: 1px solid #ded9d9;
    background: #EEE;
  }
</style>
